<template>
  <q-scroll-area style="width: 340px; height: 350px">
    <q-item v-for="item in rows" :key="item.id">
      <q-item-section>
        <q-item-label>
          <RouterLink
            class="text-primary decoration-none"
            :to="`personal/${item.createUserInfo.id}/create`"
          >
            {{ item.createUserInfo.username }}
          </RouterLink>
          <span> {{ nTag.noticeType[item.noticeType] }}</span>
          <RouterLink class="text-primary decoration-none" :to="`/blog/${item.artId}`">
            {{ item.articleTitle }}
          </RouterLink>
          <span class="text-gray-8">{{ item.noticeTime }}</span>
        </q-item-label>
      </q-item-section>
    </q-item>

    <q-item clickable v-show="loading">
      <q-item-section>
        <q-item-label>
          <q-skeleton type="text" />
          <span class="text-gray-8"><q-skeleton type="text" /></span>
        </q-item-label>
      </q-item-section>
    </q-item>
    <q-item v-show="!loading && pageParam.recordCount == 0">
      <q-item-section class="text-center"> 暂无消息 </q-item-section>
    </q-item>
    <div class="row justify-center" v-if="pageParam.totalPage > 1">
      <q-btn
        dense
        :loading="loading"
        flat
        :disable="pageParam.recordCount == 0 || pageParam.pageNum == pageParam.totalPage"
        :label="pageParam.pageNum >= pageParam.totalPage ? '已加载全部' : '加载更多'"
        @click="
          () => {
            pageParam.pageNum++
            load()
          }
        "
      />
    </div>
  </q-scroll-area>
</template>

<script setup lang="ts">
import type { ApiType } from 'src/service/api'
import { noticeArt } from 'src/service/api/notice'
import { onMounted, ref } from 'vue'
import { nTag } from './shared'

const pageParam = ref({
  order: 'create_time',
  pageNum: 1,
  pageSize: 7,
  totalPage: 0,
  recordCount: 0,
})

type rowType = ApiType<typeof noticeArt>['Return']['rows'][0]
const rows = ref<Array<rowType>>([])

const loading = ref(false)

const f5 = () => {
  pageParam.value.pageNum = 1
  rows.value = []
  load()
}

const load = () => {
  loading.value = true
  noticeArt(pageParam.value).then(({ data, error }) => {
    loading.value = false
    if (!error) {
      rows.value.push(...data.rows)
      pageParam.value.pageNum = data.pageNum
      pageParam.value.pageSize = data.pageSize
      pageParam.value.totalPage = data.totalPage
      pageParam.value.recordCount = data.recordCount
    }
  })
}

onMounted(() => {
  f5()
})
</script>

<style scoped></style>
